<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:o="http://openfaces.org/"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
</h:head>

<h:body>
	<h2>Select video for tagging</h2>
	<br/>
	
	<h:outputText value="insert tag here"></h:outputText>
	
	<f:view>
		<h:form>
			<h:panelGrid columns="2">
				<h:outputLabel value="duraion"/>
				<o:inputText id="duraion" value="#{selectVideoToTag.duraion}" focusedStyle="background: Cornsilk"/>
			</h:panelGrid>
			<h:commandButton id="selectbutton" value="Select" >
 				<f:ajax event="click" listener="#{selectVideoToTag.select}" execute="@form" render=":videos"/>
			</h:commandButton>
		</h:form>
		<h:panelGroup id="videos" rendered="#{selectVideoToTag.initial!=true}">
			<o:dataTable value="#{selectVideoToTag.videos}" var="video">
				<o:column>
            		<h:outputText value="#{video.videoURL}" />
        		</o:column>
				<o:column>
            		<h:outputText value="#{video.receivedTime}" />
        		</o:column>
			</o:dataTable>
			<ui:repeat value="#{selectVideoToTag.videos}" var="video">
				<h:form >
					<h:outputText value="#{video.videoURL}" />
					<o:inputText id="tag" value="#{videoTagCollector.videoId}"></o:inputText>
					<h:commandButton id="tagbutton" value="Tag" action="#{selectVideoToTag.tag}">
						<f:setPropertyActionListener target="#{videoTagCollector.videoId}" value="#{video.objectId}"/>
					</h:commandButton>
					
<!-- 					<h:commandLink value="#{video.videoURL}" >
  						<f:setPropertyActionListener target="#{videoTagCollector.videoId}" value="#{video.objectId}"/>
					</h:commandLink> -->					
				</h:form>
			</ui:repeat>
			<ui:repeat value="#{selectVideoToTag.videos}" var="video">
			    <h:link outcome="tag" value="#{video.videoURL}">
			        <f:param name="videoId" value="#{video.objectId}" />
			    </h:link>
			    <br/>
			</ui:repeat>

		</h:panelGroup>
	</f:view>
</h:body>
</html>
